<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引导横幅</title>
</head>

<body>




  <div class="content-box">
    <!--内容-->
    <section class="banner-carousel">
      <!--内容-->
      <div class="m-banner">
        <!--图片-->
        <div class="image">
          <img src="./images/RWFFrK.59b5b58.jpg" />
        </div>
        <!--文本-->
        <div class="body-copy">
          <h2>全新推出 Windows 11</h2>
          <p>全新 Windows 体验，让您与热爱的人和事物离得更近。</p>
        </div>
        <!--链接-->
        <div class="ctaclass">
          <a href="#" target="_blank">
            <span>了解详细信息</span>
          </a>
        </div>
      </div>
    </section>
  </div>
  https://www.microsoft.com/zh-cn/edge/home?form=MA13FJ#evergreen
  <style>
    .content-box {
      min-height: 1px;
      max-width: calc(1600px + 10%);
      margin: 0 auto;
      padding-left: 5%;
      padding-right: 5%;
    }

    .content-box::before {
      content: " ";
      display: table;
    }

    .banner-carousel {
      margin-top: 40px;
      position: relative;
    }

    /*内容*/

    .banner-carousel .m-banner {
      padding: 0 !important;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      justify-content: space-between;
      align-items: center;

      margin-top: 0;

      text-align: left;
      background-color: #efefef;

      clear: both;

      float: none;
      max-width: 100%;
      margin: 0 auto;
    }

    .banner-carousel .m-banner::before {
      content: " ";
      display: table;
    }

    /*图片*/
    .banner-carousel .image {
      width: 33.33333%;
      float: left;
      min-height: 1px;
    }

    .banner-carousel .m-banner .image img {
      max-height: none !important;
      margin: 0 auto;
      width: auto;

      height: 100%;
      display: block;
      /*margin: 0;*/
      max-width: 100%;
    }

    /*文本*/
    .body-copy {
      text-align: left;
      width: 41.66667%;
      float: left;
      min-height: 1px;
    }

    .body-copy h2 {
      padding-top: 0;
      padding-bottom: 10px;
      font-size: 24px;
      line-height: 28px;

      margin-top: 0;
      margin-bottom: 0;
    }

    .body-copy p {
      margin-top: 0;
      margin-bottom: 0;
    }

    .ctaclass {
      text-align: center;
      width: 25%;
    }

    .ctaclass a {
      display: inline-block;
      margin-right: 0;
      position: relative;

      outline-offset: -3px;
      color: #005293;
      background: none !important;
      transition: none;
      border: 2px solid transparent;
      margin: 12px auto 0;
      padding: 10px 3px 7px 0;

      text-decoration: none;
    }

    .ctaclass a span {
      max-width: 100%;
      display: inline-block;
      position: relative;
      left: 0;
      text-overflow: clip;
      overflow: hidden;
      transition: all 0.2s ease-in-out;
      vertical-align: top;
      line-height: 18.5px;
    }

    .ctaclass a:hover span {
      box-shadow: 0 3px 0 -1px currentColor;
    }

    .ctaclass a:hover:after {
      right: -4px !important;
      transition: all 0.2s ease-in-out;
    }

    .ctaclass a::after {
      font-size: 11px;
      margin-top: 0px;
      margin-left: 3px;
      display: inline-block;
      position: relative;
      right: 0;
      content: ">";
      vertical-align: top;
      transition: all 0.2s ease-in-out;
    }

    @media only screen and (max-width: 767px) {

      .banner-carousel .body-copy,
      .banner-carousel .ctaclass,
      .banner-carousel .image {
        width: 100%;
        display: block;
        text-align: center;
      }

      .banner-carousel .image img {
        margin: 0 auto;
      }
    }
  </style>
</body>

</html>